<template>
    <div>
        <el-form
				v-loading="loading"
                element-loading-text="正在登录..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
				:rules="rules"
				:model="user_form"
				 ref="user_form"
                class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item prop="username">
                <el-input size="normal" type="text" auto-complete="off" v-model="user_form.username"
                          placeholder="请输入用户名" @change="password()"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input size="normal" type="password"  auto-complete="off" v-model="user_form.password"
                          placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
				<el-switch v-model='status' active-color="#13ce66"  active-text="记住密码">
				</el-switch>
			</el-form-item>
            <el-button size="normal" type="primary" style="width: 100%;" @click="submit_form('user_form')" >登录</el-button>
        </el-form>
    </div>
</template>

<script>
	
	
    export default {
        name: "Login",
        data() {
            return {
				loading: false,
				status:true,
				user_form:{
					username:'',
					password:''
				},
				rules: {
				  username: [
					{ required: true, message: '请输入用户名', trigger: 'change' }
				  ],
				  password: [
					{ required: true, message: '请输入密码', trigger: 'change' }
				  ]
				}
			}
        },
        methods: {
            submit_form(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loading = true;
						this.postRequest("/doLogin",this.user_form).then(res=>{
							this.loading = false;
							
							// 保存用户进全局变量和本地缓存
							if(res.object){ // 如果有数据 
								window.sessionStorage.setItem("user",res.object);
								this.$store.commit('INIT_CURRENTHR', res.object);
								if(this.status == true){
									// 本地缓存账号
									localStorage.setItem(this.user_form.username,this.user_form.password);
								}else{
									localStorage.removeItem(this.user_form.username);
								}
								
							}
							
							let path = this.$route.query.redirect;
							this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			password(){
				if(localStorage.getItem(this.user_form.username)!=null){
					this.user_form.password = localStorage.getItem(this.user_form.username);
				}
			}
        }
    }
	
	
</script>

<style>
	
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
</style>
